<template>
  <div>
    <!-- 加载状态 -->
    <el-loading v-model:loading="loading" />

    <!-- 列表内容 -->
    <div class="content-list" v-if="!loading">
      <!-- 无数据提示 -->
      <el-empty v-if="!counselorList.length" description="暂无数据" />

      <!-- 咨询师列表 -->
      <div v-else v-for="counselor in counselorList" :key="counselor.user_id" class="counselor-item">
        <!-- 左侧头像 -->
        <el-avatar 
          :size="80" 
          :src="counselorAvatars[counselor.user_id] || '/default-avatar.jpg'" 
          class="avatar" 
        />
        
        <!-- 中间信息区 -->
        <div class="info">
          <!-- 名字和基本信息 -->
          <div class="header">
            <h3 class="name">{{ counselor.name }}</h3>
            <div class="basic-info">
              <span v-if="counselor.level">{{ `国家${counselor.level}级` }}</span>
              <span v-if="counselor.workplace">{{ counselor.workplace }}</span>
              <span v-if="counselor.address">{{ counselor.address }}</span>
            </div>
          </div>
          
          <!-- 资质信息 -->
          <div v-if="counselor.tag" class="qualification">{{ counselor.tag }}</div>
          
          <!-- 联系方式 -->
          <div class="contact-info">
            <span>电话：{{ formatMobile(counselor.mobile) }}</span>
            <span v-if="counselor.email">邮箱：{{ counselor.email }}</span>
          </div>
        </div>
        
        <!-- 右侧预约按钮 -->
        <el-button type="primary" class="book-btn" @click="handleBook(counselor)">
          预约
        </el-button>
      </div>
    </div>

    <!-- 分页 -->
    <div class="example-pagination-block" v-if="total > 0">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :total="total"
        :page-sizes="[10, 20, 30, 40]"
        layout="total, sizes, prev, pager, next"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';
import { useRouter } from 'vue-router';
import CounselorApi from '@/api/counselor';
import type { UserCounselorData, QueryParams } from '@/api/counselor/types';
import { ElMessage } from 'element-plus';

// Props 定义
const props = defineProps<{
  SearchData: QueryParams
}>();

const router = useRouter();
const loading = ref(true);
const counselorList = ref<UserCounselorData[]>([]);
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(0);

// 存储咨询师头像的映射
const counselorAvatars = ref<{ [key: string]: string }>({});

// 获取咨询师列表
const getCounselorList = async (searchParams?: QueryParams) => {
  try {
    loading.value = true;
    const params = {
      Page: currentPage.value,
      Size: pageSize.value,
      is_delete: 0,
      ...searchParams,
    };

    const response = await CounselorApi.getUserCounselors(params);
    
    // 直接使用返回的数组
    if (Array.isArray(response.data)) {
      counselorList.value = response.data;
      total.value = response.data.length;
      
    } else {
      counselorList.value = [];
      total.value = 0;
    }
  } catch (error) {
    ElMessage.error('获取咨询师列表失败');
    console.error('获取咨询师列表失败:', error);
    counselorList.value = [];
    total.value = 0;
  } finally {
    loading.value = false;
  }
};

// 监听搜索参数变化
watch(() => props.SearchData, (newVal) => {
  currentPage.value = 1; // 重置页码
  getCounselorList(newVal);
}, { deep: true, immediate: true });

// 处理页码变化
const handleCurrentChange = (val: number) => {
  currentPage.value = val;
  getCounselorList(props.SearchData);
};

// 处理每页数量变化
const handleSizeChange = (val: number) => {
  pageSize.value = val;
  currentPage.value = 1;
  getCounselorList(props.SearchData);
};

// 格式化手机号
const formatMobile = (mobile: string) => {
  return mobile ? mobile.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2') : '';
};

// 预约咨询师
const handleBook = (counselor: UserCounselorData) => {
  router.push({
    path: '/reservePage/details',
    query: { 
      type: 'detail',
      user_id: counselor.user_id,
      fromWhere: 'reservePage'
    }
  });
};
</script>

<style scoped>
.counselor-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.counselor-item {
  display: flex;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid #eee;
  transition: background-color 0.3s;
}

.counselor-item:hover {
  background-color: #f5f7fa;
}

.avatar {
  margin-right: 20px;
}

.info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.header {
  display: flex;
  align-items: center;
  gap: 16px;
}

.name {
  font-size: 18px;
  font-weight: bold;
  margin: 0;
}

.basic-info {
  display: flex;
  gap: 16px;
  color: #666;
  font-size: 14px;
}

.qualification {
  color: #333;
  font-size: 14px;
}

.contact-info {
  display: flex;
  gap: 16px;
  color: #666;
  font-size: 14px;
}

.book-btn {
  margin-left: 20px;
}

.example-pagination-block {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .counselor-item {
    flex-direction: column;
    text-align: center;
  }

  .avatar {
    margin: 0 0 10px 0;
  }

  .info {
    align-items: center;
  }

  .header {
    flex-direction: column;
    gap: 8px;
  }

  .basic-info {
    flex-wrap: wrap;
    justify-content: center;
  }

  .book-btn {
    margin: 20px 0 0 0;
    width: 100%;
  }
}
</style>
